<div class="content" layout-padding>
    <h1>
        添加员工
    </h1>

    <form name="EmployeeForm">
        <md-input-container class="md-block">
            <label>员工名称</label>
            <input md-maxlength="20" minlength="2" required name="Name" ng-model="Employee.Name">
            <div class="hint" ng-if="showHints">员工名称</div>
            <div ng-messages="EmployeeForm.Name.$error">
                <div ng-message="required">请填写员工名称</div>
                <div ng-message="md-maxlength">员工名称不能超过20</div>
                <div ng-message="minlength">员工名称不能小于2</div>
            </div>
        </md-input-container>

        <md-input-container>
            <label>部门</label>
            <md-select placeholder="选择部门" name="Department" ng-model="Employee.DepartmentId">
                <md-option ng-selected="Employee.DepartmentId==item.id" ng-repeat="item in Departments"
                           value="{{item.id}}">
                    {{item.name}}
                </md-option>
            </md-select>
            <div ng-messages="EmployeeForm.Department.$error">
                <div ng-message="required">请选择部门</div>
            </div>
        </md-input-container>

        <md-input-container class="md-block">
            <label>员工密码</label>
            <input md-maxlength="20" minlength="6" required name="Password" ng-model="Employee.Password">
            <div class="hint" ng-if="showHints">员工密码</div>
            <div ng-messages="EmployeeForm.Password.$error">
                <div ng-message="required">请填写员工密码</div>
                <div ng-message="md-maxlength">员工密码不能超过20</div>
                <div ng-message="minlength">员工密码不能小于6</div>
            </div>
        </md-input-container>

        <md-input-container flex class="md-block">
            <label>员工薪水</label>
            <input min="0" max="10000000" type="number" required name="Salary"
                   ng-model="Employee.Salary">
            <div ng-messages="EmployeeForm.Salary.$error">
                <div ng-message="required">请填员工薪水</div>
                <div ng-message="min">员工薪水必须大于0</div>
                <div ng-message="max">员工薪水不超过10000000</div>
            </div>
        </md-input-container>

        <md-input-container flex class="md-block">
            <label>员工年终奖</label>
            <input min="0" max="10000000" type="number" required name="Reward" ng-model="Employee.Reward">
            <div ng-messages="EmployeeForm.Reward.$error">
                <div ng-message="required">请填员工年终奖</div>
                <div ng-message="min">员工年终奖必须大于0</div>
                <div ng-message="max">员工年终奖不超过10000000</div>
            </div>
        </md-input-container>

        <md-input-container flex class="md-block">
            <label>五险一金</label>
            <input min="0" type="number" required name="Insurances" ng-model="Employee.Insurances">
            <div ng-messages="EmployeeForm.Insurances.$error">
                <div ng-message="required">请填员工五险一金</div>
                <div ng-message="min">五险一金必须大于0</div>
            </div>
        </md-input-container>

        <md-input-container flex class="md-block">
            <label>调整</label>
            <input type="number" name="Adjust" ng-model="Employee.Adjust">
        </md-input-container>

        <md-input-container class="md-block">
            <label>员工电话</label>
            <input md-maxlength="20" minlength="10" required name="Phone" ng-model="Employee.Phone">
            <div class="hint" ng-if="showHints">员工电话</div>
            <div ng-messages="EmployeeForm.Phone.$error">
                <div ng-message="required">请填写员工电话</div>
                <div ng-message="md-maxlength">员工电话不能超过20</div>
                <div ng-message="minlength">员工电话不能小于10</div>
            </div>
        </md-input-container>
        <md-input-container class="md-block">
            <label>员工邮箱</label>
            <input md-maxlength="20" minlength="10" required name="Email" ng-model="Employee.Email">
            <div class="hint" ng-if="showHints">员工邮箱</div>
            <div ng-messages="EmployeeForm.Email.$error">
                <div ng-message="required">请填写员工邮箱</div>
                <div ng-message="md-maxlength">员工邮箱不能超过20</div>
                <div ng-message="minlength">员工邮箱不能小于10</div>
            </div>
        </md-input-container>


        <md-input-container class="md-block">
            <label>员工描述</label>
            <textarea md-maxlength="100" minlength="2" rows="5" required name="Description"
                      ng-model="Employee.Description"></textarea>
            <div class="hint" ng-if="showHints">员工描述</div>
            <div ng-messages="EmployeeForm.Description.$error">
                <div ng-message="required">请填写员工描述</div>
                <div ng-message="md-maxlength">员工描述不能超过50</div>
                <div ng-message="minlength">员工描述不能小于2</div>
            </div>
        </md-input-container>


        <md-button ng-disabled="loadding||EmployeeForm.$invalid" class="md-raised" ng-click="addEmployee()">
            <div layout="row" layout-align="center center">
                <div flex="30" ng-show="loadding">
                    <md-progress-circular class="md-accent" md-mode="indeterminate"
                                          md-diameter="40"></md-progress-circular>
                </div>
                <span flex>添加</span>
            </div>
        </md-button>
    </form>

</div>